
<template>
  <div class="wrapper">
    <a-page-header
      style="padding: 12px;background-color: #fff;border-bottom: 1px solid rgb(235, 237, 240)"
      title="申报组织详情"
      @back="toToBack()"
    >
    <template v-slot:extra>
      <div style="display: flex;align-items: center;">
        <a-button v-if="!$store.getters.isMzRole" type="primary" @click="handleClickUpload" style="margin-right: 15px;">上传补充材料</a-button>
        <a-button :disabled="syncFileUrl === '-1'" :loading="syncFileUrl === '1'"  type="primary"  @click="handlePreview(1)" style="margin-right: 15px;">
           {{ sysProjectFile.id ? '重新' : '' }}合并文件预览
        </a-button>
        <div v-if="sysProjectFile.id" @click="handlePreview(2)" style="cursor: pointer;color: #1890ff;">
          <div>{{ sysProjectFile.original }}</div>
          <div>{{ sysProjectFile.createTime | moment }}</div>
        </div>
      </div>
    </template>
  </a-page-header>
    <a-card :bordered="false">
      <a-row>
        <a-col :md="12" :sm="24">
          <a-descriptions >
            <div slot="title" class="title">
              <div class="name">{{ detail.organizationName }}</div>
              <div class="type">{{ detail.socialOrganizationType }}</div>
            </div>
            <a-descriptions-item label="创建人" :span="1.5">{{ detail.createUserName }}</a-descriptions-item>
            <a-descriptions-item label="创建时间">{{ detail.createTime }}</a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :md="12" :sm="24">
          <div class="jd" v-if="role.roleKey === 'admin'|| role.roleKey === 'GUIDANCE_EXPERT'">
            <span class="key">填报进度</span>
            <a-progress strokeColor="#4674F6" :percent="(detail.recordCount/detail.managementCount) | setDecimals" status="normal" style="width: 370px" />
          </div>
          <div class="list">
            <div class="item">
              <div class="value">{{ +detail.recordSelfScoreSum }}</div>
              <div class="key">自评得分</div>
            </div>
            <div class="item">
              <div class="value">{{ detail.passMark }}</div>
              <div class="key">及格分数</div>
            </div>
            <div class="item">
              <div class="value">{{ detail.declarationlevel }}</div>
              <div class="key">申请级别</div>
            </div>
            <div class="item" v-if="role.roleKey === 'admin' || role.roleKey === 'GUIDANCE_EXPERT'">
              <div class="value">{{ +detail.recordScoreZhidaoSum || 0 }}</div>
              <div class="key">指导得分</div>
            </div>
            <div class="item" v-if="role.roleKey === 'admin' || role.roleKey === 'EXPERT'">
              <div class="value">{{ +detail.recordScoreSum || 0 }}</div>
              <div class="key">专家打分</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-card>
    <div class="listContent">
      <div class="quotaTreeBox">
        <!-- <a-input-search v-model="target" style="padding: 15px" placeholder="搜索" @search="onSearch" enter-button /> -->
        <a-input-search
          style="margin: 15px;width: 90%;"
          v-model="filterText"
          allowClear
          placeholder="请输入"
        >
        </a-input-search>
        <!-- 展示内容 -->
        <div class="quotaTreeList">
          <el-tree
            ref="treeRef"
            node-key="id"
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
            :data="treeData"
            :props="elTreeProps"
            :filter-node-method="filterNode"
            @node-click="onSelect"
          >
            <div slot-scope="{ data }" class="fourQuota">
              <!-- <ellipsis  :length="100" tooltip>{{ data.target.trim() }}</ellipsis> -->
              <div :class="data.cj == 4 ? '': 'text-gray'" :id="'elTreeId' + data.id">{{ data.target }}</div>
              <template v-if="data.cj == 4">
                <div class="tip yes" v-if="data.isScore === 1">已打分</div>
                <div class="tip no" v-if="data.isScore === 0">未打分</div>
              </template>
            </div>
          </el-tree>
          <!-- <a-tree
            v-if="treeData.length"
            :tree-data="treeData"
            :replaceFields="{
              children:'childs',
              title:'target',
              key:'id'
            }"
            defaultExpandAll
            @select="onSelect"
          >
            <template slot="custom" slot-scope="item">
              <div class="fourQuota">
                <ellipsis :length="16" tooltip>{{ item.target.trim() }}</ellipsis>
                <div class="tip yes" v-if="item.isScore === 1">已打分</div>
                <div class="tip no" v-if="item.isScore === 0">未打分</div>
              </div>
            </template>
          </a-tree> -->
          <div class="spinBox" v-if="treeSpinning">
            <a-spin />
          </div>
        </div>
      </div>
      <div class="listBox">
        <a-form layout="inline" class="status" v-if="role.roleKey === 'EXPERT' || role.roleKey === 'GUIDANCE_EXPERT'">
          <a-row :gutter="[48,0]" >
            <a-col :sm="24">
              <a-form-item
                label="审核状态"
              >
                <a-radio-group
                  v-model="queryParam.isScore"
                  button-style="solid"
                  @change="getRecordQuatoPage()"
                >
                  <a-radio-button :value="-1">
                    全部
                  </a-radio-button>
                  <a-radio-button :value="0">
                    未打分
                  </a-radio-button>
                  <a-radio-button :value="1">
                    已打分
                  </a-radio-button>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <!-- <a-col :sm="24">
                <a-form-item
                  label="审核状态"
                >
                  <a-radio-group
                    v-model="queryParam.auditStatus"
                    button-style="solid"
                    @change="getRecordQuatoPage()"
                  >
                    <a-radio-button :value="-1">
                      全部
                    </a-radio-button>
                    <a-radio-button :value="1">
                      未审核
                    </a-radio-button>
                    <a-radio-button :value="2">
                      已审核
                    </a-radio-button>
                  </a-radio-group>
                  <span style="margin-left: 16px;color: red;" v-if="detail.annotations">专家批注：{{ detail.annotations }}</span>
                </a-form-item>
              </a-col> -->
            <!-- <a-col :md="8" :sm="24">
                <a-form-item
                  label="填报状态"
                >
                  <a-radio-group
                    v-model="queryParam.submitStatus"
                    button-style="solid"
                    @change="getRecordQuatoPage()"
                  >
                    <a-radio-button :value="-1">
                      全部
                    </a-radio-button>
                    <a-radio-button :value="1">
                      未填报
                    </a-radio-button>
                    <a-radio-button :value="2">
                      已填报
                    </a-radio-button>
                  </a-radio-group>
                </a-form-item>
              </a-col> -->
          </a-row>
        </a-form>
        <div class="index-list">
          <a-list-item :key="index" v-for="(item, index) in data" @click="jumpFill(item)">
            <div class="tbzt" :class="item.submitStatus === 1 ? 'no' : 'yes'">填报状态：<span>{{ item.submitStatus === 2 ? '已填报' : '未填报' }}</span></div>
            <!-- <div class="tbzt no" v-if="item.submitStatus === 1">填报状态：未填报</div> -->
            <!-- 有扣分 -->
            <div v-if="item.expertDeduction == 1" class="points">有扣分</div>
            <div class="isEdited" v-if="item.updateStatus === 1"></div>
            <div class="list-content">
              <div class="list-content-item">
                <div class="value target">{{ item.target }}</div>
              </div>
              <div class="list-content-item">
                <div class="key">总分</div>
                <div class="value">{{ item.totalPoint }}</div>
              </div>
              <div class="list-content-item">
                <div class="key">自评得分</div>
                <div class="value">{{ item.selfScore || 0 }}</div>
              </div>
              <div class="list-content-item" v-if="role.roleKey === 'admin' || role.roleKey === 'GUIDANCE_EXPERT'">
                <div class="key">指导得分</div>
                <div class="value">{{ +item.scoreZhidao || 0 }}</div>
              </div>
              <div class="list-content-item" v-if="role.roleKey === 'admin' || role.roleKey === 'EXPERT'">
                <div class="key">专家打分</div>
                <div class="value">{{ +item.score || 0 }}</div>
              </div>
              <div class="list-content-item" v-if="role.roleKey === 'EXPERT' || role.roleKey === 'GUIDANCE_EXPERT'">
                <img src="@/assets/images/system/ydf.png" class="statusImg" v-if="item.isScore === 1"/>
                <img src="@/assets/images/system/wdf.png" class="statusImg" v-if="item.isScore === 0"/>
              </div>
            </div>
          </a-list-item>
          <div v-if="indexLoading" class="spinBox">
            <a-spin />
          </div>
        </div>
      </div>
    </div>
    <uploadForm :visible="visible" @ok="handleClickOk" @cancel="visible = false"></uploadForm>
    <!-- 文件预览 -->
    <a-modal
      title="word预览"
      :width="1000"
      :visible="previewVisible"
      :footer="null"
      @cancel="
        () => {
          previewVisible = false;
        }
      "
    >
      <div class="docx_container">
        <div class="home">
          <div ref="file"></div>
        </div>
        <div v-if="previewLoading" class="spinBox">
          <a-spin></a-spin>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { Ellipsis } from '@/components'
import bus from '@/utils/bus'
import { getDeclarationInfoDetail, getRecordQuatoPage, getTaskFileStatus } from '@/api/system'
import { getQuotaTreeByUser } from '@/api/category'
import { previewFile } from '@/api/reply'
const docx = require("docx-preview");
import uploadForm from './uploadForm.vue'
import axios from 'axios'
export default {
  name: 'DeclareSystemDetail',
  components: {
    Ellipsis,
    uploadForm
  },
  data () {
    this.formLayout = {
      labelAlign: 'left',
      labelCol: {
        span: 2
      },
      wrapperCol: {
        span: 22
      }
    }
    return {
      socialOrganizationTypeId: +this.$route.query.socialOrganizationTypeId, // 申报体系id
      declarationInfoId: this.$route.query.declarationInfoId,
      targetManagementIdList: '',
      target: '',
      detail: {},
      treeData: [],
      treeSpinning: false,
      // 查询参数
      queryParam: { auditStatus: -1, submitStatus: -1, isScore: -1 },
      current: 1,
      size: 1000,
      data: [],
      contentHeight: 0,
      visible: false,
      indexLoading: false,
      currentNode: null,
      filterText: '',
      syncFileUrl: '-1', // 文件预览路径 默认0: 未点击预览文件  1: 已点击预览文件，但还在执行中  其他值：已执行完成，可以预览
      sysProjectFile: '', // 额外增加
      timeInterval: null,
      elTreeProps: {
        children: 'childs',
        label: 'target'
      },
      previewLoading: false,
      previewVisible: false, // 预览word pic
    }
  },
  watch: {
    '$route.query.declarationInfoId': {
      handler (val) {
        if (val && +val !== +this.declarationInfoId) {
          document.querySelector('html').scrollTop = 0
          this.declarationInfoId = val
          this.socialOrganizationTypeId = +this.$route.query.socialOrganizationTypeId
          this.targetManagementIdList = ''
          this.target = ''
          this.detail = {}
          this.treeData = []
          this.treeSpinning = false
          this.queryParam = { auditStatus: -1, submitStatus: -1, isScore: -1 }
          this.current = 1
          this.size = 1000
          this.data = []
          this.getData()
        }
      },
      deep: true
    },
    filterText(val) {
      this.$refs.treeRef.filter(val);
    }
  },
  filters: {
    setDecimals (val) {
      return +((val * 100).toFixed(0))
    }
  },
  computed: {
    role () {
      return this.$store.getters.roles
      // return { roleKey: 'EXPERT' }
    },
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  created () {
    this.getData()
  },
  activated() {
    this.getDetail()
  },
  mounted () {
    // this.contentHeight = document.body.clientHeight - 64 - 24
    // window.addEventListener('resize', () => {
    //   this.contentHeight = document.body.clientHeight - 64 - 24
    // })
    bus.$on('toRefreshData', (status) => {
      if (status === 'refreshDetail') {
        // this.getDetail()
        this.getQuotaTreeByUser()
        this.getRecordQuatoPage()
      } else if (status === 'updateStatus') {
        this.getRecordQuatoPage()
      }
    })
  },
  deactivated () {
    this.clearInterval()
  },
  beforeDestroy () {
    this.clearInterval()
  },
  methods: {
    toToBack() {
      bus.$emit('toRefreshData', 'refreshOrgList')
      this.$router.go(-1)
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.target.indexOf(value) !== -1;
    },
    handleClickOk () {
      this.visible = false
    },
    // 上传补充资料
    handleClickUpload () {
      this.visible = true
    },
    getData () {
      this.getDetail()
      this.getQuotaTreeByUser()
      this.getRecordQuatoPage()
    },
    getDetail () {
      getDeclarationInfoDetail({
        id: this.declarationInfoId
      })
      .then(res => {
        this.detail = res
        let flag = '0'
        if (this.detail.taskId) {
          flag = '1'
          this.startLoadFileStatus()
        }
        this.syncFileUrl = flag
      })
    },
    getQuotaTreeByUser () {
      this.treeSpinning = true
      getQuotaTreeByUser({
        target: this.target,
        declarationInfoId: this.declarationInfoId
      })
      .then(data => {
        // this.treeData = this.getLeaf(res)
        this.treeData = data || []
      }).finally(() => {
          this.treeSpinning = false
        })
    },
    getLeaf (data) {
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i].cj === 4) {
          data[i].isLeaf = true
          data[i].scopedSlots = {
            title: 'custom'
          }
        } else if (data[i].childs && data[i].childs.length > 0) {
          data[i].disabled = true
          data[i].childs = this.getLeaf(data[i].childs)
        }
      }
      return data
    },
    getRecordQuatoPage () {
      this.indexLoading = true
      const requestParameters = Object.assign({}, { current: this.current, size: this.size, declarationInfoId: this.declarationInfoId, targetManagementIdList: this.targetManagementIdList, target: this.target }, this.queryParam)
      if (requestParameters.submitStatus === -1) {
        delete requestParameters.submitStatus
      }
      if (requestParameters.auditStatus === -1) {
        delete requestParameters.auditStatus
      }
      if (requestParameters.isScore === -1) {
        delete requestParameters.isScore
      }
      getRecordQuatoPage(requestParameters).then(res => {
        this.data = res.records
      }).finally(res => {
        this.indexLoading = false
      })
    },
    onSearch () {
      this.getQuotaTreeByUser()
      this.getRecordQuatoPage()
    },
    onSelect (data, treeNode) {
      if (data.cj != 4) {
        this.$refs.treeRef && this.$refs.treeRef.setCurrentKey(null)
        this.currentNode = null
        this.targetManagementIdList = id
        this.getRecordQuatoPage()
        return
      }
      let id = ''
      if (this.currentNode && this.currentNode.target === data.target) {
        treeNode.checked = !treeNode.checked
      } else {
        treeNode.checked = true
      }
      if (treeNode.checked) {
        // 选中
        this.currentNode = data
        id = data.id
      } else {
        // 取消选中
        this.$refs.treeRef && this.$refs.treeRef.setCurrentKey(null)
        this.currentNode = null
      }
      this.targetManagementIdList = id
      this.getRecordQuatoPage()
    },
    jumpFill (info) {
      // 当前状态是已填报，去判断是否可以去打分
      if (info.submitStatus === 2) {
        // 这里的info.id是指标id，而不是指标填报的id
        // isUserCheck({
        //   recordId: info.targetDeclarationRecordId,
        //   userId: this.userInfo.user.userId
        // }).then(res => {
        //   if (res) {
        //     this.$router.push({
        //       name: 'DeclareSystemFill',
        //       query: {
        //         targetDeclarationRecordId: info.targetDeclarationRecordId,
        //         socialOrganizationTypeId: this.socialOrganizationTypeId,
        //         declarationInfoId: this.declarationInfoId
        //       }
        //     })
        //   } else {
        //     this.$message.warning('该指标没有审核权限')
        //   }
        // })
        this.$router.push({
          name: 'DeclareSystemFill',
          query: {
            treeId: info.id,
            targetDeclarationRecordId: info.targetDeclarationRecordId,
            socialOrganizationTypeId: this.socialOrganizationTypeId,
            declarationInfoId: this.declarationInfoId
          }
        })
        this.$store.commit('setCollapsed', true)
      } else {
        // this.$message.warning('该指标未填报')
        // this.$router.push({
        //   name: 'DeclareSystemFill',
        //   query: {
        //     targetDeclarationRecordId: info.targetDeclarationRecordId,
        //     socialOrganizationTypeId: this.socialOrganizationTypeId,
        //     declarationInfoId: this.declarationInfoId
        //   }
        // })
      }
    },
    // 预览文件
    handlePreview(flag) {
      if (this.syncFileUrl === '-1') {
        return
      }
      if (flag == 1) {
        this.$confirm({
          title: '提示',
          content: `是否确定${this.sysProjectFile.id ? '重新' : ''}合并文件预览？`,
          okType: 'danger',
          onOk: () => {
            let params = {
              id: this.detail.id
            }
            previewFile(params).then(resData => {
              this.sysProjectFile = ''
              this.detail.taskId = resData.taskId
              this.syncFileUrl = '1'
              this.startLoadFileStatus()
            })
          }
        })
      }  else {
        // 进行预览
        this.previewVisible = true
        this.previewLoading = true
        this.$refs.file && (this.$refs.file.innerHTML = '')
        let fileUrl = process.env.VUE_APP_FILE_API + this.syncFileUrl
        axios({
          method: "get",
          responseType: "blob", // 设置响应文件格式
          url: fileUrl,
        }).then(({ data }) => {
          docx.renderAsync(data, this.$refs.file) // 渲染到页面预览
        })
        .catch(e => {
          this.$refs.file.innerHTML = '<div style="color: red;text-align: center; opacity: .8;">加载文件异常</div>'
        })
        .finally(() => {
          this.previewLoading = false
        })
      }
    },
    startLoadFileStatus() {
      window.clearInterval(this.timeInterval)
      this.loadTaskFileStatus()
      this.timeInterval = setInterval(() => {
        this.loadTaskFileStatus()
      }, 30000)
    },
    clearInterval() {
      window.clearInterval(this.timeInterval)
    },
    // 轮询加载合并文件状态
    loadTaskFileStatus() {
      getTaskFileStatus(this.detail.taskId).then(data => {
        if (data.status == 1) {
          this.syncFileUrl = data.sysProjectFile?.url || '1'
          this.sysProjectFile = data.sysProjectFile
          this.clearInterval()
        } else {
          this.syncFileUrl = '1'
        }
      })
    },
    handlePreview_back() {
      this.previewVisible = true
      this.previewLoading = true
      // 服务器本地访问
      let params = {
        id: this.detail.id
      }
      previewFile(params).then(resData => {
        let fileUrl = process.env.VUE_APP_FILE_API + resData.url
        axios({
          method: "get",
          responseType: "blob", // 设置响应文件格式
          url: fileUrl,
        }).then(({ data }) => {
          docx.renderAsync(data, this.$refs.file) // 渲染到页面预览
        })
        .catch(e => {
          this.$refs.file.innerHTML = '<div style="color: red;text-align: center; opacity: .8;">加载文件异常</div>'
        })
        .finally(() => {
          this.previewLoading = false
        })
      }).catch(e => {
        this.previewLoading = false
      })
    },
  }
}
</script>
<style lang="less">
.quotaTreeBox .el-tree-node__content {
  height: 30px !important;
}
.quotaTreeBox .el-tree-node__content:hover {
  background-color: #f0f7ff;
  border-radius: 5px;
}
.quotaTreeBox .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background-color: #ccddf2 !important;
  border-radius: 5px;
}
</style>
<style lang="less" scoped>
.wrapper {
  .title {
    .flex-start();
    .name {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
    }
    .type {
      font-size: 14px;
      color: rgba(153, 153, 153, 0.85);
      margin-left: 15px;
    }
  }
  .jd {
    .flex-end();
    margin-bottom: 25px;
    .key {
          margin-right: 10px;
        }
  }
  .list {
    .flex-end();
    .item {
      width: 100px;
      height: 63px;
      background: #F7F9FC;
      border: 1px solid #E5ECFF;
      border-radius: 4px;
      color: rgba(0, 0, 0, 0.85);
      margin-left: 16px;
      .flex-center-vertical();
      .key {
        font-size: 14px;
      }
      .value {
        font-size: 16px;
        span {
          color: #0084FE;
        }
      }
    }
  }
  .listContent {
    // height: calc(100vh - 325px);
    height: calc(100vh - 296px);
    position: relative;
    width: 100%;
    margin-top: 15px;
    overflow: hidden;
    display: flex;
  }
  .quotaTreeBox {
    width: 300px;
    height: 100%;
    margin-right: 15px;
    background: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .quotaTreeList {
      flex: 1;
      padding: 5px 15px;
      overflow: auto;
      border-top: 1px solid #efefef;
      &::-webkit-scrollbar {
        width: 4px;
      }
      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 10px;
        box-shadow: inset 0 0 5px #c1c1c1;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 0;
        box-shadow: inset 0 0 5px transparent;
      }
    }
    .fourQuota {
      width: 235px;
      // padding-bottom: 10px;
      cursor: pointer;
      .flex-between();
      .tip {
        width: 50px;
        height: 20px;
        line-height: 20px;
        border-radius: 4px;
        font-size: 12px;
        color: #FFFFFF;
        text-align: center;
        &.yes {
          background: #21C87F;
        }
        &.no {
          background: #FF5454;
        }
      }
    }
  }
  .listBox {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .spinBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .flex-center();
  }
  :deep(.ant-radio-button-wrapper ) {
  margin-right: 8px;
    &:first-child {
      border-radius: 0;
    }
    &:last-child {
      border-radius: 0;
    }
  }
  .status {
    background-color: #fff;
    margin-bottom: 16px;
    padding: 16px;
  }
  // :deep(.ant-list), 
  .index-list {
    flex: 1;
    overflow: auto;
    position: relative;
    .ant-list-item {
      position: relative;
      background-color: #fff;
      padding: 30px 25px 25px;
      margin-bottom: 15px;
      .tbzt {
        position: absolute;
        top: 0;
        left: 0;
        width: 138px;
        height: 25px;
        line-height: 25px;
        padding-left: 12px;
        // background: url('@/assets/images/system/tip.png') no-repeat center;
        // background-size: 100% 100%;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.85);
        border-bottom-right-radius: 24px;
        &.yes {
          background: #21C87F;
        }
        &.no {
          // background: url('@/assets/images/system/tip.png') no-repeat center;
          // background-size: 100% 100%;
          background: #FF5454;
        }
      }
      .points {
        color: rgba(255, 255, 255, 0.85);
        font-size: 12px;
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
        border-radius: 2px;
        position: absolute;
        right: 0;
        top: 0;
        background-color: red;
      }
      .isEdited {
        position: absolute;
        top: -5px;
        left: -5px;
        width: 14px;
        height: 14px;
        border-radius: 100%;
        background: red;
      }
      .list-content {
        width: 100%;
        cursor: pointer;
        .flex-between();
        .list-content-item {
          .key {
            font-size: 14px;
            color: rgba(153, 153, 153, 0.85);
            margin-bottom: 10px;
          }
          .value{
            font-size: 18px;
            color: rgba(0, 0, 0, 0.85);
          }
          .statusImg {
            height: 70px;
          }
          .target {
            width: 200px;
            text-align: center;
          }
        }
      }
    }
  }
  .expertBox {
    background: #fff;
    .top {
      padding: 16px;
      .flex-between();
    }
    .docBox {
      width: 100%;
      background: #333
    }
  }
  :deep(.ant-tree)  {
    li .ant-tree-node-content-wrapper.ant-tree-node-selected {
      background: none;
      color: #0084FE;
    }
  }
}

::v-deep .docx-wrapper {
  padding: none;
  background: none;
}

::v-deep .docx {
  width: auto !important;
  padding: 0px !important;
  box-shadow: none !important;
}
::v-deep .ant-input-number-handler-wrap {
  display: none;
}
.docx_container {
  position: relative;
  min-height: 500px;
  max-height: 900px;
  overflow: auto;
  .spinBox {
    display: flex;
    justify-content: center;
    background: #fff;
    width: 100%;
    height: 100%;
    padding-top: 150px;
  }
}
</style>
